<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    fullscreen
    class="no-padding"
    @close="emit('pushCloseDialog')"
  >
    <iframe
      :src="previewUrl"
      width="100%"
      style="padding: 0; height: calc(100vh - 58px)"
      frameborder="0"
    />
  </el-dialog>
</template>
<script setup lang="ts" name="PreviewFileDialog">
import { preview } from "@/api/index";
const emit = defineEmits(["pushCloseDialog"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  url: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "文件预览",
  },
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      init();
    }
    dialogVisible.value = val;
  },
  { deep: true }
);
const dialogVisible = ref(false),
  loading = ref(false),
  filePath = ref(""),
  previewUrl = ref("");
const init = () => {
  fetchData();
};

const fetchData = async () => {
  preview({ filePath: props.url }).then((backdata: any) => {
    previewUrl.value = backdata.data;
  });
};
</script>
